<!DOCTYPE html>
<html lang="en">
        <head>
    <meta charset="UTF-8">
    <title>合同查询</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <META content="MSHTML 6.00.2900.5626" name=GENERATOR></HEAD>
    </head>
  <body>
  <script>
      layui.use('table', function(){
          var table = layui.table;
          //遍历查询出来的结果
          table.render({
              elem: '#demo'
              // ,height: 312
              ,url: '/Cont/selectContract' //数据接口 方法的地址
              ,cellMinWidth: 80
              , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                  layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                  //,curr: 5 //设定初始在第 5 页
                  , groups: 1 //只显示 1 个连续页码
                  , first: false//不显示首页
                  , last: false //不显示尾页
              }
              ,
              cols: [
                  [ //表头的字段
                      {field: 'id', title: 'ID',  sort: true, fixed: 'left'},
                      {field: 'contNum', title: '合同编号',  sort: true},
                      {field: 'contItem', title: '合同标的物', sort: true},
                      {field: 'contPrice', title: '合同总金额', sort: true},
                      {field: 'remark', title: '备注',  sort: true}
                  ]
              ],id:'tableAll',
          });
         //搜索事件 嗨嗨嗨！
          $('#search').on('click', function(){
              // alert($('#MATERIAL_NUM').val());
              table.reload('tableAll', {
                  method : 'get',
                  /*url:'/contractmanager/byName',//这个不写表示使用table中的请求*/
                  where : {
                      contItem : $.trim($('#contItem').val()),
                      contNum : $.trim($('#contNum').val()),
                      contDate : $.trim($('#contDate').val()),
                      verifyDate : $.trim($('#verifyDate').val())

                  },
                  page : {
                      curr : 1
                  }
              });
              return false;
          });
      });
  </script>

  <table class="layui-table" cellSpacing=1 cellPadding=3 width="100%" border=1 >
      <TR bgColor=#ffffff>
          <TD align=middle width="100%" bgColor=#ffffff colSpan=20 height=22>
              <H2>
                  <b color=#0070c0>合同查询</b>
              </H2>
          </TD>
      </TR>
      <tr>
          <td colspan="9"  align=middle >
              <form >
                  物资名称： <div class="layui-input-inline">
                  <input type="text" id="contItem" name="contItem" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
                  合同号：  <div class="layui-input-inline">
                  <input type="text" id="contNum" name="contNum" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
                  日期: <div class="layui-inline">
                  <input type="text" class="layui-input" name="contDate" id="contDate">
              </div>
                  <i class="layui-icon  layui-icon-date" style=" font-size:30px;color: #00bbee;vertical-align: middle"></i>
                  <script src="/static/build/layui.js"></script>
                  <script>
                      layui.use('laydate', function(){
                          var laydate = layui.laydate;
                          //执行一个laydate实例
                          laydate.render({
                              elem: '#contDate' //指定元素
                          });
                      });
                  </script>
                  至
                  <div class="layui-inline">
                      <input type="text" class="layui-input"  name="verifyDate" id="verifyDate">
                  </div>
                  <i class="layui-icon  layui-icon-date" style="font-size:30px;color: #00bbee;vertical-align: middle"></i>
                  <script>
                      layui.use('laydate', function(){
                          var laydate = layui.laydate;
                          //执行一个laydate实例
                          laydate.render({
                              elem: '#verifyDate' //指定元素
                          });
                      });
                  </script>

                  <button type="button" id="search" class="layui-btn" style="margin-left: 25px;width: 80px;">查询</button>
              </form>
          </td>
      </tr>
      <tr>
          <td >
              <table  id="demo" lay-filter="demo" width="100%" style="height: 100%" >
          </table>
          </td>
      </tr>
      <tr >
          <td colspan="11">
              <strong>打印状态注释:</strong><br>
              <p style="text-indent:7em;"> 为便于供应商查看合同是否已打印，当打印完后，点击【未打印】按钮，改变打印状态。</p>
          </td>
      </tr>
            </table>
</body>
</html>